<template>
  <div>
    <transition name="el-zoom-in-center">
      <div class="jsbos-preview-main authorize-bd">
        <div class="jsbos-common-page-header">
          <el-page-header @back="goBack" :content="title" />
          <div class="options">
            <el-button @click="goBack">{{$t('common.cancelButton')}}</el-button>
          </div>
        </div>
        <div class="jsbos-flex-main">
          <el-tabs v-model="tabActiveName" @tab-click="handleClick" class="jsbos-flex-tabs">
            <el-tab-pane label="按钮权限" name="buttonAuthorize">
              <ButtonAuthorizeListDrawer v-if="buttonAuthorizeListDrawer" ref="buttonAuthorizeList" />
            </el-tab-pane>
            <el-tab-pane label="列表权限" name="columnAuthorize">
              <ColumnAuthorizeListDrawer v-if="columnAuthorizeListDrawer" ref="ColumnAuthorizeList" />
            </el-tab-pane>
            <el-tab-pane label="数据权限" name="dataAuthorize">
              <DataAuthorizeListDrawer v-if="dataAuthorizeListDrawer" ref="DataAuthorizeList" />
            </el-tab-pane>
            <el-tab-pane label="表单权限" name="formAuthorize">
              <FormAuthorizeListDrawer v-if="formAuthorizeListDrawer" ref="FormAuthorizeList" />
            </el-tab-pane>

            <el-tab-pane label="角色信息" name="roleAuthorize">
              <div class="jsbos-common-layout-main jsbos-flex-main">
                <jsbos-table v-loading="listLoading" :data="roleTreeList" :border="true">
                  <el-table-column prop="fullName" label="角色名称" width="200" />
                  <el-table-column prop="enCode" label="角色编码" width="150" />
                  <el-table-column prop="type" label="角色类型" width="70" align="center" />
                  <el-table-column prop="organizeInfo" label="所属组织" min-width="150" show-overflow-tooltip />
                  <el-table-column prop="creatorTime" label="创建时间" :formatter="jsbos.tableDateFormat" width="120" />
                  <el-table-column prop="sortCode" label="排序" width="70" align="center" />
                  <el-table-column prop="enabledMark" label="状态" width="70" align="center">
                    <template slot-scope="scope">
                      <el-tag :type="scope.row.enabledMark == 1 ? 'success' : 'danger'" disable-transitions>
                        {{ scope.row.enabledMark == 1 ? '正常' : '停用' }}</el-tag>
                    </template>
                  </el-table-column>

                </jsbos-table>
              </div>

            </el-tab-pane>

            <el-tab-pane label="人员列表" name="userAuthorize">
              <div class="jsbos-common-layout-main jsbos-flex-main">
                <jsbos-table v-loading="listLoading" :data="userTreeList">
                  <el-table-column prop="code" label="工号" width="100" />
                  <el-table-column prop="realName" label="姓名" width="100" />
                  <el-table-column prop="account" label="账号" width="100" />
                  <el-table-column prop="gender" label="性别" width="90" align="center">
                    <template slot-scope="scope" sortable>
                      <span>{{
                    scope.row.gender == 1
                    ? "男"
                    : scope.row.gender == 2
                      ? "女"
                      : "保密"
                  }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="mobilePhone" label="手机" width="120" />
                  <el-table-column prop="organize" label="所属组织" min-width="200" show-overflow-tooltip />
                  <el-table-column prop="creatorTime" label="创建时间" :formatter="jsbos.tableDateFormat" width="120" />
                  <el-table-column prop="sortCode" label="排序" width="70" align="center" />
                  <el-table-column prop="enabledMark" label="状态" width="70" align="center">
                    <template slot-scope="scope">
                      <el-tag type="success" disable-transitions v-if="scope.row.enabledMark == 1">正常
                      </el-tag>
                      <el-tag type="warning" disable-transitions v-else-if="scope.row.enabledMark == 2">锁定
                      </el-tag>
                      <el-tag type="danger" disable-transitions v-else>禁用</el-tag>
                    </template>
                  </el-table-column>
                </jsbos-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </transition>

  </div>
</template>
<script>
  import ButtonAuthorizeListDrawer from "./components/buttonAuthorize/home";
  import ColumnAuthorizeListDrawer from "./components/columnAuthorize/home";
  import DataAuthorizeListDrawer from "./components/dataAuthorize/home";
  import FormAuthorizeListDrawer from "./components/formAuthorize/home";
  import {
    getButtonAuthorizeList
  } from '@/api/system/buttonAuthorize'
  import {
    getColumnAuthorizeList
  } from "@/api/system/columnAuthorize";
  import {
    getFieldNameList
  } from "@/api/system/menu";
  import {
    getDataSourceListAll
  } from "@/api/systemData/dataSource";
  import {
    getFormAuthorizeList
  } from "@/api/system/formAuthorize";
  import {
    getRoleListByMenuId
  } from "@/api/permission/role";
  import {
    getUserListByMenuId
  } from "@/api/permission/userSetting"
  import DataSchemeForm from "./components/dataAuthorize/DataSchemeForm.vue";
  import DataAuthorizeForm from "./components/dataAuthorize/DataAuthorizeForm.vue";
  import DataConnectForm from "./components/connectForm/index.vue";
  export default {
    components: {
      DataSchemeForm,
      DataAuthorizeForm,
      DataConnectForm,
      ButtonAuthorizeListDrawer,
      ColumnAuthorizeListDrawer,
      DataAuthorizeListDrawer,
      FormAuthorizeListDrawer
    },
    data() {
      return {
        tabActiveName: "buttonAuthorize",
        dataAuthorizeListDrawer: false,
        buttonAuthorizeListDrawer: false,
        columnAuthorizeListDrawer: false,
        formAuthorizeListDrawer: false,
        dataAuthorizeListDrawer: false,
        title: "",
        moduleId: "",
        fullName: "",
        listLoading: false,
        menuType: 2,
        roleTreeList: [], //角色列表
        userTreeList: [], //人员列表
      };
    },
    methods: {
      init(moduleId, fullName, type) {
        this.title = fullName + "-菜单权限"
        this.fullName = fullName;
        this.menuType = type;
        this.moduleId = moduleId;
        this.tabActiveName = "buttonAuthorize";
        this.$nextTick(() => {
          if (this.$refs["DataConnectForm"]) {
            this.$refs["DataConnectForm"].dataForm.dataSelect = "";
          }
          this.listLoading = true;
          this.buttonAuthorizeListDrawer = true;
          this.$nextTick(() => {
            this.$refs.buttonAuthorizeList.init(this.moduleId, fullName);
          });
        });

      },

      goBack() {
        this.$emit('close')
      },
      handleClick() {
        const activeTab = this.tabActiveName;
        if (activeTab === "buttonAuthorize") {
          this.buttonAuthorizeListDrawer = true;
          this.$nextTick(() => {
            this.$refs.buttonAuthorizeList.init(this.moduleId, this.fullName);
          });
        } else if (activeTab === "columnAuthorize") {
          this.columnAuthorizeListDrawer = true;
          this.$nextTick(() => {
            this.$refs.ColumnAuthorizeList.init(this.moduleId, this.fullName, this.menuType);
          });
        } else if (activeTab === "formAuthorize") {
          this.formAuthorizeListDrawer = true;
          this.$nextTick(() => {
            this.$refs.FormAuthorizeList.init(this.moduleId, this.fullName, this.menuType);
          });
        } else if (activeTab === "dataAuthorize") {
          this.dataAuthorizeListDrawer = true;
          this.$nextTick(() => {
            this.$refs.DataAuthorizeList.init(this.moduleId, this.fullName, this.menuType);
          });
        } else if (activeTab === "roleAuthorize") {
          this.getRoleList();
        } else if (activeTab === "userAuthorize") {
          this.getUserList();
        }

      },
      //获取人员列表
      getUserList() {
        this.listLoading = true
        getUserListByMenuId(this.moduleId).then(res => {
          this.userTreeList = res.data
          this.listLoading = false
        }).catch(() => {
          this.listLoading = false
        })
      },
      //获取角色列表
      getRoleList() {
        this.listLoading = true
        getRoleListByMenuId(this.moduleId).then(res => {
          this.roleTreeList = res.data
          this.listLoading = false
        }).catch(() => {
          this.listLoading = false
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .jsbos-preview-main {
    overflow: hidden;
    overflow-x: hidden;
  }
  >>>.el-table__body-wrapper {
    height: 60vh !important;
    overflow-y: auto !important;
  }
  .tableContainer {
    flex: 1 0 0;
    height: 100%;
    overflow: unset !important;
  }
</style>
